<template>
  <div class="settings-page">
    <h1>系统设置</h1>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="settings.username" required />
      </div>
      
      <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="settings.email" required />
      </div>
      
      <div class="form-group">
        <label for="language">语言:</label>
        <select id="language" v-model="settings.language">
          <option value="zh">中文</option>
          <option value="en">英文</option>
          <option value="es">西班牙语</option>
          <option value="es">泰语</option>
          <option value="es">韩语</option>
          <option value="es">日语</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>通知设置:</label>
        <div>
          <input type="checkbox" id="emailNotifications" v-model="settings.emailNotifications" />
          <label for="emailNotifications">邮箱通知</label>
        </div>
        <div>
          <input type="checkbox" id="smsNotifications" v-model="settings.smsNotifications" />
          <label for="smsNotifications">短信通知</label>
        </div>
      </div>

      <router-link to="/home">保存设置</router-link>
    </form>
    <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  name: 'SettingsPage',
  setup() {
    const settings = ref({
      username: '',
      email: '',
      language: 'zh',
      emailNotifications: false,
      smsNotifications: false,
    });

    const successMessage = ref('');

    const handleSubmit = () => {
      // 模拟保存设置操作
      console.log('保存的设置:', settings.value);
      successMessage.value = '设置已保存成功！';
      // 可以在这里添加 API 调用来保存设置
    
    };

    return {
      settings,
      handleSubmit,
      successMessage,
    };
  },
};
</script>

<style scoped>
a{
  text-decoration: none;
  
}
.settings-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.success-message {
  margin-top: 20px;
  color: green;
}
</style>